<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app button{
            padding:5px;
            margin:5px;
        }
        #app button.active{
            background: red;
        }
        #app div{
            width: 500px;
            height: 300px;
            border:1px solid green;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button :class="{active:index===i}" @click="index=i" v-for="(item,i) in newsList" :key="i">{{item.type}}</button>
        <div>
            <p v-for="item in infoArr" :key="item.id">{{item.newsTitle}}</p>
        </div>
    <!-- infoArr -> newsTitle    -->
    </div>
</body>
<script>
    // 侦听与计算属性的区别：
    // 1- 侦听是通过watch声明，计算属性是通过computed声明
    // 2- 侦听不需要返回值，计算属性要有返回值。
    // 3- 侦听默认不会立即调用。计算属性在模板中调用才会执行
    // 4- 侦听没有缓存，计算属性有缓存。
    // 5- 侦听的应用：侦听某一数据发生改变后的一个行为。计算属性：受多个属性的变化而变化。
    // 6- 侦听支持异步，计算属性不支持异步。
    new Vue({
        el:"#app",
        data:{
            index:1,
            newsList:[
                {
                    type:"体育",
                    infoList:[
                        {
                            id:11,
                            newsTitle:"体育1"
                        },
                        {
                            id:12,
                            newsTitle:"体育2"
                        }
                    ]
                },
                {
                    type:"娱乐",
                    infoList:[
                        {
                            id:21,
                            newsTitle:"娱乐1"
                        },
                        {
                            id:22,
                            newsTitle:"娱乐2"
                        }
                    ]
                },
                {
                    type:"财经",
                    infoList:[
                        {
                            id:31,
                            newsTitle:"财经1"
                        },
                        {
                            id:32,
                            newsTitle:"财经2"
                        }
                    ]
                }
            ]
        },
        computed:{
            infoArr(){
                return this.newsList[this.index].infoList;
            }
        }
    })
</script>
</html>